<template>
<div>
    <van-tabs v-model="active" animated>
        <van-tab title="推荐音乐">
            <div class="outer">
                <div class="outer-text"><span></span><h4>推荐歌单</h4></div>
            <ul class="inner">
                <li v-for="(item,index) in arrList" :key="index" class="inner-li">
                    <router-link :to="{name:'detailr',params:{id:item.id}}"> <img :src="item.picUrl" alt=""></router-link>

                    <p>{{item.name}}</p>
                </li>
            </ul>
            </div>
            <div class="outer-text"><span></span><h4>最新音乐</h4></div>
            <ul class="musicbox">



                        <li v-for="(item,index) in arrmusic" :key="index" class="music-inner">
                            <router-link :to="{path:'/listdetailr',query:{id:item.id}}">

                            <h4 class="music-p1">{{item.name}}</h4>
                            <p class="music-p2"><van-icon name="play-circle" /></p>
                            <div style="clear: both"></div>
                            </router-link>
                            <p class="music-p3"><van-tag type="warning">SQ</van-tag>{{item.song.artists[0].name}}/{{item.song.album.name}}</p>
                        </li>


            </ul>
        </van-tab>
        <van-tab title="排行榜">

            <div class="top-outer">
                <div v-for="(item,index) in toplist" :key="index" class="topbox">

                        <div class="topimg">
                            <img :src="item.coverImgUrl" alt="">
                        </div>
                    <router-link :to="{name:'rankings',params:{id:item.id}}">
                    <div v-for="(item,index) in item.tracks" :key="index" class="top-text">
                        {{index+1}}{{item.first}}--{{item.second}}
                    </div>
                    </router-link>
                </div>
            </div>
        </van-tab>
        <van-tab title="搜索">
            <div class="inp">
            <van-search
                    v-model="value"
                    placeholder="请输入搜索关键词"
                    input-align="center"
            />
            </div>
        </van-tab></van-tabs>
</div>
</template>

<script>
// import {getNewSongList} from "@/api/api.js"
    export default {
        name: "Navtab",
        data() {

            return {
                active: 0,
                arrList:[],
                arrmusic:[],
                toplist:[],
                value: '',

            };

        },
        created() {

            this.axios.get("/music-api/personalized?limit=6").then((res)=>{
                console.log(res)
                this.arrList=res.data.result
                // console.log(this.$route.params);

            }),
                this.axios.get("/music-api/personalized/newsong?limit=10").then((res)=>{
                    // console.log(res)
                    this.arrmusic=res.data.result
                    // console.log(this.arrmusic)
                }),

                //歌曲详情
                this.axios.get("/music-api/toplist/detail").then((res)=>{
                    console.log(res)
                    this.listid=res.data.list[0].id
                    console.log(this.listid)
                    this.toplist=res.data.list

                    console.log(this.toplist)
                })
                // getNewSongList(10).then(res => console.log(res))
            // getNewSongList().then((res) =>{
            //     console.log(res)
            // })

        }
    }
</script>

<style scoped>
.inner{
    list-style: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    /*margin-top: 20px;*/
}
    .inner-li{
        float: left;
        width: calc(100% / 3);

    }
.inner-li img{
    width: 100%;
}
.outer-text{
    text-align: left;
    padding-left: 20px;
    margin-top: 20px;
}
    .outer-text span{
        width: 20px;
        height: 15px;
        border: 3px solid red;
        background-color: red;
    }



.outer-text h4{
    display: inline-block;
    margin-left: 10px;
}


.musicbox{
    height: 800px;
    margin-top: 10px;
}
.music-inner{
    /*text-align: left;*/
    width: 100%;
    height: 60px;

}
    .music-p1{
        float: left;
        padding-left: 30px;
        /*clear: both;*/
        color: black;
        font-weight: bold;
    }
.music-p2{
    float: right;
    padding-right: 20px;
    font-size: 30px;
    color: #AAAAAA;
}
    .music-p3{
        text-align: left;
        padding-left: 30px;
        font-size: 10px;
        color: black;
        margin-top: -10px;
    }
    .topbox{
        width: 100%;
        /*border: 1px solid black;*/
        height: 100px;
        margin-top: 10px;
    }
.topimg{
    float: left;
    overflow: hidden;
    height: 100px;
    overflow: hidden;
    border-radius: 20px ;

}
.topimg img{
    width: 100px;
    /*height: 50px;*/
}
.top-text{
    text-align: left;
    padding:7px 30px;
    /*padding-left: 30px;*/
    margin-left: 10px;
}
.top-outer{
    height: 440px;
    overflow: hidden;
}
.inp{
    margin: 0 20px;
    border-radius: 20px;
}
    *{
        margin: 0;
        padding: 0;
    }
</style>